<template>
	<el-dialog v-model="dialogFormVisible" title="添加产品入库" width="600" align-center draggable>
	    <div class="dialog-content">
			  <el-form ref="ruleFormRef" style="max-width: 600px" :model="formData" :rules="rules" label-width="120px"  
			   :label-position="labelPosition">
				    <el-form-item label="入库编号" prop="product_id">
						<el-input v-model="formData.product_id" />
					</el-form-item>
					<el-form-item label="产品名称" prop="product_name">
						<el-input v-model="formData.product_name" />
					</el-form-item>
					<el-form-item label="产品类别" prop="product_category">
						<el-select v-model="formData.product_category" placeholder="请选择部门">
							<el-option v-for="item in categoryData"  :key="item" :label="item" :value="item" />
						</el-select>                
					</el-form-item>
					<el-form-item label="产品单位" prop="product_unit">
						<el-select v-model="formData.product_unit" placeholder="请选择产品单位">
							<el-option label="个" value="个" />
							<el-option label="件" value="件" />
						</el-select>
					</el-form-item>
					<el-form-item label="产品入库数量" prop="product_inwarehouse_number">
						<el-input v-model="formData.product_inwarehouse_number" />
					</el-form-item>
					<el-form-item label="产品入库单价" prop="product_single_price">
						<el-input v-model="formData.product_single_price" />
					</el-form-item>
					<el-form-item label="入库操作人" prop="product_create_person">
						<el-input v-model="formData.product_create_person" />
					</el-form-item>
					<el-form-item label="入库备注" prop="in_memo">
						<el-input v-model="formData.in_memo" :rows="2" type="textarea" />
					</el-form-item>
			  </el-form>
		</div>
		<!-- 底部内容 -->
		<template #footer>
		  <span class="dialog-footer">
			<el-button type="primary" @click="addproduct" >
			  确定
			</el-button>
		  </span>
		</template>
	  </el-dialog>
</template>

<script lang="ts" setup>
	import {getProduct} from '@/api/setting.js'
	import {createProduct} from '@/api/product.js'
	import { ElMessage } from 'element-plus'
	import { reactive, ref } from 'vue'
	const labelPosition = ref('left')
	const title=ref()
	
	// 产品数据
	const categoryData=ref([])
	const getproduct=async()=>{
		categoryData.value=await getProduct()
	}
	getproduct()
	
	interface formData{
		product_id : number,
		product_name : string,
		product_category : string,
		product_unit : string,
	    product_inwarehouse_number : number,
		product_single_price : number,
		product_create_person : string,
		in_memo : string
	}
	const formData:formData=reactive({
		product_id: null,
		product_name: '',
		product_category: '',
		product_unit: '',
	    product_inwarehouse_number: null,
		product_single_price: null,
		product_create_person: '',
		in_memo: ''
	})
	
	// 表单规则
	const rules = reactive({
		product_id: [
			{ required: true, message: '请输入入库编号', trigger: 'blur' },
		],
		product_name: [
			{ required: true, message: '请输入产品名称', trigger: 'blur' },
		],
		product_category: [
			{ required: true, message: '请选择产品类别', trigger: 'blur' },
		],
		product_unit: [
			{ required: true, message: '请选择产品单位', trigger: 'blur' },
		],
	    product_inwarehouse_number: [
			{ required: true, message: '请输入产品入库数量', trigger: 'blur' },
		],
		product_single_price: [
			{ required: true, message: '请输入产品入库单价', trigger: 'blur' },
		],
		product_create_person: [
			{ required: true, message: '请输入入库操作人', trigger: 'blur' },
		],
	})
	
	const emit=defineEmits(['success'])
    // 产品入库
	const addproduct=async()=>{
		const res=await createProduct(formData)
		console.log(res);
		if(res.status===0){
			ElMessage({
			    message: '产品入库成功',
			    type: 'success',
			  })
			  emit('success')
			  // bus.emit('adminDialogOff',1)
			  dialogFormVisible.value=false
		}else{
			ElMessage.error('产品入库失败')
		}
	}
	
	// 弹窗开关  创建管理员
    const dialogFormVisible = ref(false)
	const open=()=>{
		dialogFormVisible.value=true
	}
	defineExpose({
		open
	})
	
</script>

<style lang="scss" scoped>
	.dialog-content{
		display: flex;
		padding:20px 30px;
	}
	:deep(.el-form-item){
		margin: 30px;
	}
</style>